// @ts-nocheck
import { Text } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

export const Word: typeof Text = ({ children, ...props }) => {
  const fontProps = {
    font: './Inter-Bold.woff',
    fontSize: 12.5,
    letterSpacing: -0.05,
    lineHeight: 1,
    'material-toneMapped': false,
  };
  const ref = useRef();
  // Tie component to the render-loop
  useFrame(({ camera }) => {
    // Make text face the camera
    ref.current.quaternion.copy(camera.quaternion);
    // Animate font color
    // ref.current.material.color.lerp(color.set(hovered ? '#fa2720' : 'white'), 0.1)
  });
  return <Text ref={ref} {...fontProps} {...props} children={children} />;
};
